import React, {FC, useEffect, useState} from 'react';
import {Link, NavLink} from "react-router-dom";
import {renderRoutesMap, RouteCompProps} from "central-react-router";

interface HomeProps extends RouteCompProps{
}

const Home: FC<HomeProps> = (props) => {

    const [count, setCount] = useState<number>(0);

    console.log('props', props)

    // @ts-ignore
    const route = props.route;

    // @ts-ignore
    const routes = props.route?.routes;

    useEffect(() => {
        console.log('Home 组件挂载完毕!');
    }, [route]);

    console.log('Home 组件render!');
    return (
        <div key={1}>
            <Link to={'/MyHome'}>MyHome</Link>
            <br/>
            <div>Home 组件</div>
            {count}
            <br/>
            <button onClick={() => setCount(prevState => prevState + 2)}>+2</button>
            <br/>
            <NavLink to={'/home/01'}>Children01</NavLink>
            <br/>
            <NavLink to={'/home/02'}>Children02</NavLink>
            <br/>
            <NavLink to={'/not_found'}>Not Found</NavLink>
            <br/>
            <NavLink to={'/home/not_found'}>Child Not Found</NavLink>
            {renderRoutesMap(routes)}
        </div>
    );
};

export default Home;
